<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
  <script type="text/javascript">
    window.history.replaceState(null, null, window.location.href);
    console.log("aaa")
  </script>
  <style type="text/css">
      .form-view {
          margin: 20px;
          padding: 0px 10px;
          padding-bottom: 20px;
          border-radius: 7px;
          border: 2px solid #4e575a;
      }

      .title-view {
          text-align: center;
          font-weight: bold;
          font-size: large;
      }

      .result-view {
          margin: 20px;
          padding: 0px 10px;
          border-radius: 7px;
          border: 2px solid #4e575a;
      }

      .ans-view {
          display: flex;
          flex-direction: row;
      }

      .ans-item {
          padding: 4px;
          margin: 0px 10px;
          color: #2BE3FA;
          background: #4e575a;
          border-radius: 2px
      }
  </style>
</head>
<body>
<div>
  <form action="/poetry/upload/" class="form-view" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="title-view">选择图片</div>
    <input type="file" name="image_input" placeholder="上传图片">
    <input type="submit" placeholder="上传">
  </form>
  <div class="result-view" style="font-size: small">
    <div class="title-view">识别结果</div>
    <p>图片名称：{{img_name}}</p>
    <div class="ans-view">
      识别文本：
      {% for ans in texts %}
      <span style="color: #d22b34">{{ans}}</span>
      {% endfor %}
    </div>
    <div>
      识别结果：
      <span style="color: #d22b34;">数量：{{ans_num}}</span>
    </div>
    <div class="ans-view">
      识别答案：
      {% for ans in answers %}
      <span class="ans-item">{{ans.0}}-{{ans.1}}</span>
      {% endfor %}
    </div>
    <div style="display: flex;flex-direction: row;margin-top: 15px">
      <div>
        <div style="text-align: center;margin-bottom: 10px">原图</div>
        <img src="/media/images/{{ img_name }}" width="300" height="420">
      </div>
      <div style="margin-left: 20px">
        <div style="text-align: center;margin-bottom: 10px">识别结果</div>
        <img src="/media/images/{{ answer_result }}" width="300" height="420">
      </div>
      <div style="margin-left: 20px">
        <div style="text-align: center;margin-bottom: 10px">根据颜色筛选</div>
        <img src="/media/images/{{ points_range }}" width="300" height="420">
      </div>
      <div style="margin-left: 20px">
        <div style="text-align: center;margin-bottom: 10px">根据二值化筛选</div>
        <img src="/media/images/{{ points_threshold }}" width="300" height="420">
      </div>
    </div>
  </div>
</div>
</body>
</html>